<template>
  <div class="facial">
    <!-- facial profile我是面部轮廓 -->

    <header>
      <div class="before">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
        <p>面部轮廓</p>
      </div>

      <div class="back">
        <div class="search_ipt">
          <van-icon name="search" />
          <input type="text" placeholder="点击搜索" />
        </div>
        <van-icon name="cart-o" />
      </div>
    </header>
    <main>
      <div>
        <van-tabs v-model="activeName">
          <van-tab title="推荐" name="a">
            <div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
            <!-- 轮播图 -->
            <div class="photo">
              <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                  <img v-lazy="image" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <van-tabs v-model="active">
              <van-tab title="精选"></van-tab>
              <van-tab title="医院"></van-tab>
              <van-tab title="医生"></van-tab>
              <van-tab title="日记"></van-tab>
            </van-tabs>
            <ul class="tab1">
              <li>郑州<van-icon name="arrow-down" /></li>
              <li>智能排序<van-icon name="arrow-down" /></li>
              <li>筛选<van-icon name="arrow-down" /></li>
            </ul>
            <hr />
            <div class="packet">
              <button>尾款红包</button>
              <button>尾款红包</button>
              <button>尾款红包</button>
            </div>

            <div class="pic" @click="$router.push({ name: 'facialDetail' })">
              <div class="first">
                <img
                  src="https://img1.baidu.com/it/u=1591733825,3937562212&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                  alt=""
                />
              </div>
              <div class="second">
                <h4>【面部填充】自然脂肪填充单部位</h4>
                <p>券后￥ 650/次 <span>13004预定</span></p>
                <p>
                  <button>定金满199减30花呗分期</button><button>优惠</button>
                </p>
                <p>吴勇 <span>河南汇兴整形医疗美容</span></p>
              </div>
            </div>
            <div class="pic">
              <div class="first">
                <img
                  src="https://img1.baidu.com/it/u=3690903232,1400294707&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=724"
                  alt=""
                />
              </div>
              <div class="second">
                <h4>【面部填充】自然脂肪填充单部位</h4>
                <p>券后￥ 650/次 <span>13004预定</span></p>
                <p>
                  <button>定金满199减30花呗分期</button><button>优惠</button>
                </p>
                <p>吴勇 <span>河南汇兴整形医疗美容</span></p>
              </div>
            </div>
          </van-tab>

          <van-tab title="瘦脸" name="b">
            <div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
          </van-tab>

          <van-tab title="磨骨" name="c">
            <div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
          </van-tab>

          <van-tab title="丰苹果肌" name="d"
            ><div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
          </van-tab>

          <van-tab title="丰太阳穴" name="e"
            ><div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
          </van-tab>

          <van-tab title="垫下巴" name="f"
            ><div class="wipe">
              <div class="up">
                <button>全部</button>
                <button>吸脂瘦脸</button>
                <button>轮廓瘦脸</button>
              </div>
              <div class="up">
                <button>吸脂瘦脸</button>
                <button>吸脂瘦脸</button>
                <button>展开</button>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </main>

    <main></main>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  data() {
    return {
      activeName: "a",
      active: 0,
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.facial {
  font-size: 30px;
  header {
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    margin-top: 20px;
    .before {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p {
        margin-left: 20px;
      }
    }
    .back {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .search_ipt {
        width: 300px;
        height: 60px;
        padding: 10px 0 0 40px;
        border: 1px solid #ddd;
        border-radius: 30px;
        margin-right: 30px;
        i {
          margin-right: 10px;
        }
        input {
          width: 200px;
          height: 40px;
          border: none;
          margin-left: 10px;
        }
      }
    }
  }
  main {
    overflow: hidden;
    margin-top: 30px;
    .wipe {
      .up {
        display: flex;
        justify-content: space-around;
        button {
          width: 200px;
          background: rgb(6, 5, 5);
          border-radius: 30px;
          color: white;
          margin-top: 20px;
        }
      }
    }
  }
  .photo {
    width: 600px;
    height: 300px;
    background: #ccc;
    margin: 20px auto 0;
    border-radius: 50px;
    img {
      width: 500px;
      height: 300px;
      margin-left: 50px;
    }
  }
  .tab {
    list-style: none;
    display: flex;
    li {
      width: 160px;
      height: 100px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .tab1 {
    list-style: none;
    display: flex;
    li {
      width: 160px;
      height: 100px;
      flex: 1;
      // display: flex;
      // justify-content: space-around;
      // align-items: center;
      text-align: center;
      line-height: 100px;
      font-size: 8px;
    }
  }
  .packet {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    button {
      width: 180px;
      height: 100px;
      border: 2px solid #ccc;
      border-radius: 100px;
    }
  }
  .pic {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .first {
      width: 250px;
      height: 250px;
      float: left;
      img {
        width: 250px;
        height: 250px;
      }
    }
    .second {
      float: right;
      width: 460px;
      height: 250px;
      p {
        margin-top: 25px;
      }
    }
  }
}
</style>